<style scoped >
    .billbody{height: 450px;overflow-y: auto;}
    .bill h4{
        padding: 0 15px;
        line-height: 33px;
        border: 1px solid #e5eaee;
        background:-webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#f5f5f5));
    }
    .bill h4 .billmanatitle{
        color: #37b3b3;
        font-weight: normal;
        font-size: 14px;
    }
    .bill .billmanabody{padding: 35px 27px 0px;}
    .bill .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .bill .ivu-row .ivu-col .ivu-form-item .ivu-form-item-content .ivu-select{width: 90%;}
    .bill .billmana{
        padding: 15px 16px 20px;
    }
    .bill .billmana .billmanament{
        width: 330px;
        margin: auto;
    }
    .bill .billmana .ivu-form-item .ivu-form-item-content .ivu-input-wrapper{width: 90%;}
    .bill .billmanabody .footer{
        text-align: center;
        margin-bottom: 18px;
    }
    .bill .billmanabody .footer .save{
        width: 80px;
        background: #37b3b3;
        border: 1px solid #37b3b3;
        color: #ffffff;
    }
    .bill .billmanabody .footer .save:hover{background: #019ea3;}
    .bill .billmana .footer .save:hover{background: #019ea3;}
    .bill .billmanabody .footer  .clear{
        width: 80px;
        background: #c7cdcd;
        border: 1px solid #c7cdcd;
        color: #ffffff;
    }
    .bill .billmana .footer{
        text-align: center;
    }
    .bill .billmana .footer .save{
        width: 80px;
        background: #37b3b3;
        border: 1px solid #37b3b3;
        color: #ffffff;
    }
    .bill .billmana .footer .clear{
        width: 80px;
        background: #c7cdcd;
        border: 1px solid #c7cdcd;
        color: #ffffff;
    }
</style>
<template>
    <div class="console-product">
        <Row class="position">
            <i-col :xs="12" :sm="10" :md="8" :lg="6" >
                <div class="ivu-breadcrumb">
                    <span class="ivu-breadcrumb-item-link">当前位置：</span>
                    <span class="ivu-breadcrumb-item-link">跨境电商</span>
                    <span class="ivu-breadcrumb-item-separator">/</span>
                    <span class="ivu-breadcrumb-item-link">运单管理</span>
                </div>
            </i-col>
            <i-col class="fr">
                 <span>
                  <Button @click="addBill"><i class="iconfont cofont">&#xe649;</i> 新增</Button>
                    <Modal  class-name="popup"class="bill" @on-cancel="closeBillMana('billManaValidate')" v-model="billModal" :mask-closable="false" width="860" >
                        <p slot="header" style="color: #eeebeb;" v-drag>
                            <span v-if="addBillMana">新建运单</span>
                            <span v-if="editBillMana">运单详情信息</span>
                        </p>
                        <div  class="billbody">
                            <Form ref="billManaValidate" :rules="rulebillManaCustom" :model="billManaValidate"  label-position="left" :label-width="110">
                                <Row class="billmanabody">
                                    <i-col span="12">
                                        <Form-item label="运单统一编号:" prop="seqNo">
                                            <Input disabled v-model="billManaValidate.seqNo"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="运单编号:" prop="waybillId">
                                            <input  :disabled="disabled" v-model="billManaValidate.waybillId" v-on:change="searchBillNo(billManaValidate.waybillId)" style="width: 90%;" type="text" value="" class="ivu-input">
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="航次:" prop="voyageNo">
                                            <Input v-model="billManaValidate.voyageNo"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="集装袋号:" prop="packId">
                                            <Input v-model="billManaValidate.packId"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="币制:" prop="currCode">
                                            <Select v-model="billManaValidate.currCode" clearable filterable>
                                                <Option v-for="option in currCodeList" :label="option.code" :value="option.code" :key="new Date()">
                                                    <span>{{option.name}}</span>
                                                    <span style="float:right;color:#ccc">{{option.code}}</span>
                                                </Option>
                                            </Select>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="运输方式:" prop="trafCode">
                                            <Select v-model="billManaValidate.trafCode" clearable >
                                                <Option v-for="item in trafCodeList" :value="item.value" :key="item">{{ item.label }}</Option>
                                            </Select>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="申报口岸:" prop="declPort">
                                            <Input v-model="billManaValidate.declPort"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="进出口口岸:" prop="iePort">
                                            <Input v-model="billManaValidate.iePort"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="进出境提运单号:" prop="billNo">
                                            <Input v-model="billManaValidate.billNo"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="总重量:" prop="grossWeight">
                                            <Input v-model="billManaValidate.grossWeight"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="收货人名称:" prop="consigneeName">
                                            <Input v-model="billManaValidate.consigneeName"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="收货人地址:" prop="consigneeAddr">
                                            <Input v-model="billManaValidate.consigneeAddr"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="收货人电话:" prop="consigneeTel">
                                            <Input v-model="billManaValidate.consigneeTel"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="收货人国家:" prop="consigneeCoun">
                                            <Select id="consigneeCoun" style="position: relative" v-model="billManaValidate.consigneeCoun" :label="billManaValidate.consigneeCoun" clearable filterable remote :remote-method="remoteConsigneeCoun" :loading="loadingConsigneeCoun">
                                                <Option v-for="option in consigneeCounList" :label="option.code" :value="option.code" :key="new Date()">
                                                    <span>{{option.name}}</span>
                                                    <span style="float:right;color:#ccc">{{option.code}}</span>
                                                </Option>
                                            </Select>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="发货人名称:" prop="consignerName">
                                            <Input v-model="billManaValidate.consignerName"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="发货人地址:" prop="consignerAddr">
                                            <Input v-model="billManaValidate.consignerAddr"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="发货人国家:" prop="consignerCoun">
                                            <Select id="consignerCoun" style="position: relative" v-model="billManaValidate.consignerCoun" :label="billManaValidate.consignerCoun" clearable filterable remote :remote-method="remoteConsignerCoun" :loading="loadingConsignerCoun">
                                                <Option v-for="option in consignerCounList" :label="option.code" :value="option.code" :key="new Date()">
                                                    <span>{{option.name}}</span>
                                                    <span style="float:right;color:#ccc">{{option.code}}</span>
                                                </Option>
                                            </Select>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="运输工具名称:" prop="trafName">
                                            <Input v-model="billManaValidate.trafName"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="件数:" prop="packNum">
                                            <Input v-model="billManaValidate.packNum"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="总运费:" prop="totalFreight">
                                            <Input v-model="billManaValidate.totalFreight"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="物流企业:" prop="logiEnteCode">
                                            <Select v-model="billManaValidate.logiEnteCode" @on-change="selectLogiEnteCode">
                                                <Option v-for="item in logiEnteCodeList" :value="item.logiEnteCode" :key="item.logiEnteCode">{{ item.name }}</Option>
                                            </Select>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="物流企业代码:" prop="logiEbCode">
                                            <Input v-model="billManaValidate.logiEbCode"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="物流企业名称:" prop="logiEnteName">
                                            <Input v-model="billManaValidate.logiEnteName"></Input>
                                        </Form-item>
                                    </i-col>
                                    <i-col span="12">
                                        <Form-item label="备注:" prop="note">
                                            <Input v-model="billManaValidate.note"></Input>
                                        </Form-item>
                                    </i-col>
                                    <div class="footer" v-if="editBillMana">
                                        <Button class="save" :loading="modal_loading" @click="editSaveBillMana('billManaValidate')">保存</Button>
                                    </div>
                                </Row>
                                <h4>
                                    <span v-if="addBillMana" class="billmanatitle">订单详情</span>
                                    <span v-if="editBillMana" class="billmanatitle">商品信息</span>
                                </h4>
                                <div class="billmana" v-if="addBillMana">
                                    <div class="billmanament">
                                        <Form-item label="订单编号:" prop="ordersId"  :label-width="75">
                                            <Input v-model="billManaValidate.ordersId" type="textarea" :rows="1"></Input>
                                        </Form-item>
                                    </div>
                                    <div class="footer">
                                        <Button class="save" :loading="modal_loading" @click="saveBillMana('billManaValidate')">保存</Button>
                                        <Button class="clear" @click="clearBillMana('billManaValidate')">清空</Button>
                                    </div>
                                </div>
                            </Form>
                            <div class="billmana" v-if="editBillMana">
                                 <Modal v-model="delBillManaModal" class="delectcont" class-name="delectBillMana" width="250" @on-cancel="delBillManaCancel" :mask-closable="false" >
                                    <p slot="header" style="color: #eeebeb" v-drag>
                                        <span>提示框</span>
                                    </p>
                                    <p class="delBillManabody">
                                        <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                                    </p>
                                    <div slot="footer">
                                        <div class="footer">
                                            <Button  class="save" :loading="delLoading" @click="delBillManaOK">确认</Button>
                                            <Button class="clear" @click="delBillManaCancel">取消</Button>
                                        </div>
                                    </div>
                                </Modal>
                                <Table stripe border :columns="billManaColumns" ref="billManaData" :data="billManaData"></Table>
                            </div>
                        </div>
                        <div slot="footer"></div>
                    </Modal>
                </span>
                <span>
                    <Button  @click="exportbillData()"><i class="iconfont cofont">&#xe647;</i> 批量生成报文</Button>
                </span>
            </i-col>
        </Row>
        <div class="console-product-contcent" id="contcentHeight" :style="{height:height +'px'}">
            <Form class="searchform" @on-cancel="clearSearch('billManagementForm')"  ref="billManagementForm" :model="billManagementForm" inline>
                <Form-item label="运单编号:" prop="waybillId" :label-width="65" style="width: 190px">
                    <Input v-model="billManagementForm.waybillId" @on-enter="billManagementFormSearch"></Input>
                </Form-item>
                <Form-item label="日期:" prop="createtime" :label-width="35" style="width: 235px">
                    <Date-picker type="daterange" v-model="billManagementForm.createtime"  :options="createTime0ptions" placeholder="选择日期" style="width: 200px"></Date-picker>
                </Form-item>
                <Form-item>
                    <Button class="search" @click="billManagementFormSearch">搜索</Button>
                </Form-item>
            </Form>
            <Modal v-model="delModal" class-name="delect" width="250" @on-cancel="delCancel" :mask-closable="false" >
                <p slot="header" style="color: #eeebeb" v-drag>
                    <span>提示框</span>
                </p>
                <p class="delbody">
                    <i class="iconfont" style="color: #f76165;font-size: 16px;">&#xe615</i>&nbsp;&nbsp;确认删除？
                        </p>
                <div slot="footer">
                    <div class="footer">
                        <Button  class="save" :loading="delLoading" @click="delOK">确认</Button>
                        <Button class="clear" @click="delCancel">取消</Button>
                    </div>
                </div>
            </Modal>
            <Loading v-if="spinShow"></Loading>
            <Table v-if="tableShow" @on-selection-change="selectChange" stripe border :columns="billManagementColumns" ref="billManagementData" :data="billManagementData"></Table>
        </div>
        <Row style="background-color: #ffffff;margin-top: 1px;">
            <Col>
            <div v-if="tableShow" class="tablepage clearfix">
                <div class="fl">
                    <span>共</span>
                    <span class="num">{{total}}</span>
                    <span>条记录</span>
                    <span>{{currentPage}}/{{pageTotal}}页</span>
                </div>
                <div class="fr">
                    <Page :total="total" :page-size="pageSize" :current="currentPage" placement="top" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>
                </div>
            </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    // 导入要用到的子组件
    import Loading from '../../components/loading'
    export default {
        data () {
            const validateZS = (rule, value, callback) => {
                var re =  /^[1-9]\d*$/;
                if (re.test(value)) {
                    callback();
                } else {
                    callback(new Error('请输入整数'));
                }
            };
            const validatenumber = (rule, value, callback) => {
                var re = /^\d+(\.\d+)?$/;
                if (re.test(value)) {
                    callback();
                } else {
                    callback(new Error('请输入数字'));
                }
            };
            const validateConsigneeCoun =(rule, value, callback) => {
                if (value != "") {
                    callback();
                } else {
                    callback(new Error('请输入收货人国家'));
                }
            };
            const validateConsignerCoun =(rule, value, callback) => {
                if (value != "") {
                    callback();
                } else {
                    callback(new Error('请输入发货人国家'));
                }
            };
            return {
                disabled:false,
                modal_loading: false,
                total: 0,//总条数
                currentPage: 1,//当前页
                pageTotal: 1,//总页数
                pageSize: 10,//默认每页显示数量
                height: 1000,//表单高度
                delModal: false,//删除弹窗
                delLoading:false,//删除
                delId:'',//删除id
                delBillManaModal: false,//删除编辑清单列表弹窗
                delBillManaId:'',//删除清单列表id
                spinShow: true,//加载层，默认显示
                tableShow: false,//表格层，默认隐藏
                logiEnteCodeList:[],
                currCodeList:[],
                column:"",
                waybillids:"",
                consigneeCoun:'601',
                loadingConsigneeCoun:false,
                consigneeCounList:[],
                loadingConsignerCoun:false,
                consignerCounList:[],
                trafCodeList:[
                    {value:'9',label:'快件'},
                    {value:'2',label:'水运'},
                    {value:'5',label:'空运'},
                    {value:'6',label:'邮运'}
                ],
                createTime0ptions: {
                    shortcuts: [
                        {
                            text: '最近一周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近一个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            }
                        },
                        {
                            text: '最近三个月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            }
                        }
                    ]
                },
                billManagementForm: {//运单管理条件查询
                    waybillId: '',
                    createtime: [new Date().getTime() - 3600 * 1000 * 24 * 7,new Date()]
                },
                billManagementData:[],//数据
                billManagementColumns:[
                    {
                        width:'4%',
                        type:'selection',
                        align:'center'
                    },
                    {
                        width:'12%',
                        title: '运单编号',
                        key: 'waybillId',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.waybillId,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.waybillId)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '运输方式',
                        key: 'trafCode',
                        render: (h, params) => {
                            const text = params.row.trafCode == 9  ? "快件" : params.row.trafCode == 2 ? "水运" : params.row.trafCode == 5 ?  "空运" : params.row.trafCode == 6 ?  "邮运" : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '申报口岸',
                        key: 'declPort',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.declPort,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.declPort)]);
                        }
                    },
                    {
                        width:'8%',
                        title: '进出口岸',
                        key: 'iePort',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.iePort,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.iePort)]);
                        }
                    },
                    {
                        width:'10%',
                        title: '提运单号',
                        key: 'billNo',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.billNo,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.billNo)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '总运费',
                        key: 'totalFreight',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.totalFreight,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.totalFreight)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '币种',
                        key: 'currCode',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.currCode,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.currCode)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '重量',
                        key: 'grossWeight',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.grossWeight,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.grossWeight)]);
                        }
                    },
                    {
                        width:'6%',
                        title: '总件数',
                        key: 'packNum',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.packNum,
                                    placement:"bottom-start"
                                }
                            }, [h('span', params.row.packNum)]);
                        }
                    },
                    {
                        width:'14%',
                        title: '创建时间',
                        key: 'createTime',
                        render: (h, params) => {
                            const text = params.row.createTime != null ? new Date(params.row.createTime).format('yyyy-MM-dd hh:mm:ss') : "";
                            return h('Tooltip', {
                                props: {
                                    content: text,
                                    placement:"bottom-start"
                                }
                            }, [h('span', text)]);
                        }

                    },
                    {
                        width:'4%',
                        title: '状态',
                        key: 'sendStatus',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.returnDesc,
                                }
                            }, [params.row.returnCode != "0" ? h('i', {
                                class: 'iconfont icon-chahao',
                                style:{
                                    color: '#f76165'
                                }
                            }):h('i', {
                                class: 'iconfont icon-duihao',
                                style: {
                                    color: '#37b3b3'
                                }
                            })]);
                        }
                    },
                    {
                        width:'18%',
                        title: '操作',
                        key: 'id',
                        render: (h, params) => {
                            return h('div', [
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.editBill(params.row.waybillId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-bianji'
                                        }),
                                        h("span",'编辑')
                                    ]),
                                h('Button',
                                    {
                                        class:"red",
                                        on: {
                                            click: () => {
                                                this.remove(params.row.waybillId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-qingkong'
                                        }),
                                        h("span",'删除')
                                    ]),
                                h('Button',
                                    {
                                        class:"blue",
                                        on: {
                                            click: () => {
                                                this.exportInvoice(params.row.waybillId)
                                            }
                                        }
                                    },
                                    [
                                        h('i', {
                                            class : 'iconfont icon-iconfontdocument1'
                                        }),
                                        h("span",'生成报文')
                                    ])
                            ]);
                        }
                    }
                ],
                billModal:false,//新增弹窗
                addBillMana:false,//新增
                editBillMana:false,//编辑
                billManaValidate:{//新增数据
                    seqNo: '',//运单统一编号
                    waybillId: '',//运单编号
                    voyageNo: 'KE842',//航次
                    packId: '',//集装袋号
                    currCode: '502',//币制
                    trafCode: '5',//运输方式
                    declPort: '',//申报口岸
                    iePort: '',//进出口口岸
                    billNo: '',//进出境提运单号
                    grossWeight: '',//总重量
                    consigneeName: '',//收货人名称
                    consigneeAddr: '',//收货人地址
                    consigneeTel: '',//收货人电话
                    consigneeCoun: '',//收货人国家
                    consignerName: '青岛酷特智能股份有限公司',//发货人名称
                    consignerAddr: '红领大街19号',//发货人地址
                    consignerCoun: '142',//发货人国家
                    trafName: '',//运输工具名称
                    packNum: '',//件数
                    totalFreight: '5',//总运费
                    logiEnteCode: 'X14351514',//物流企业
                    logiEbCode: '',//物流企业代码
                    logiEnteName : '',//物流企业名称
                    note: '',//备注
                    ordersId:''//订单编号
                },
                rulebillManaCustom:{//验证新增
                    /*seqNo: [
                        { type: 'string', max: 50, message: '运单统一编号不能大于50位', trigger: 'blur' }
                    ],*/
                    waybillId: [
                        {required: true, message: '请输入运单编号', trigger: 'blur'},
                        { type: 'string', max: 50, message: '运单编号不能大于50位', trigger: 'blur' }
                    ],
                    voyageNo: [
                        {required: true, message: '请输入航次', trigger: 'blur'},
                        { type: 'string', max: 50, message: '航次不能大于50位', trigger: 'blur' }
                    ],
                    packId: [
                        { type: 'string', max: 50, message: '集装袋号不能大于50位', trigger: 'blur' }
                    ],
                    /*currCode: [
                        { type: 'string', max: 50, message: '币制不能大于50位', trigger: 'blur' }
                    ],
                    trafCode: [
                        { type: 'string', max: 50, message: '运输方式不能大于50位', trigger: 'blur' }
                    ],*/
                    declPort: [
                        { type: 'string', max: 50, message: '申报口岸不能大于50位', trigger: 'blur' }
                    ],
                    iePort: [
                        { type: 'string', max: 50, message: '进出口岸不能大于50位', trigger: 'blur' }
                    ],
                    billNo: [
                        {required: true, message: '请输入进出境提运单号', trigger: 'blur'},
                        { type: 'string', max: 50, message: '进出境提运单号不能大于50位', trigger: 'blur' }
                    ],
                    grossWeight: [
                        {required: true, message: '请输入总重量', trigger: 'blur'},
                        {required: true, validator:validatenumber, trigger: 'blur'},
                        { type: 'string', max: 50, message: '总重量不能大于50位', trigger: 'blur' }
                    ],
                    consigneeName: [
                        { type: 'string', max: 50, message: '收货人名称不能大于50位', trigger: 'blur' }
                    ],
                    consigneeAddr: [
                        { type: 'string', max: 1000, message: '收货人地址不能大于1000位', trigger: 'blur' }
                    ],
                    consigneeTel: [
                        { type: 'string', max: 50, message: '收货人电话不能大于50位', trigger: 'blur' }
                    ],
                    consigneeCoun: [
                        { required: true,validator:validateConsigneeCoun, trigger: 'change'}
                    ],
                    consignerName: [
                        { type: 'string', max: 50, message: '发货人名称不能大于50位', trigger: 'blur' }
                    ],
                    consignerAddr: [
                        { type: 'string', max: 1000, message: '发货人地址不能大于1000位', trigger: 'blur' }
                    ],
                    consignerCoun: [
                        { required: true,validator:validateConsignerCoun, trigger: 'change'}
                    ],
                    trafName: [
                        { type: 'string', max: 50, message: '运输工具名称不能大于50位', trigger: 'blur' }
                    ],
                    packNum: [
                        {required: true, message: '请输入件数', trigger: 'blur'},
                        {required: true, validator:validateZS, trigger: 'blur'},
                        { type: 'string', max: 10, message: '件数不能大于10位', trigger: 'blur' }
                    ],
                    totalFreight: [
                        {required: true, message: '请输入总运费', trigger: 'blur'},
                        {required: true, validator:validatenumber, trigger: 'blur'},
                        { type: 'string', max: 50, message: '总运费不能大于50位', trigger: 'blur' }
                    ],
                    logiEnteCode: [
                        { type: 'string', max: 50, message: '物流企业不能大于50位', trigger: 'blur' }
                    ],
                    logiEbCode: [
                        { type: 'string', max: 50, message: '物流企业代码不能大于50位', trigger: 'blur' }
                    ],
                    logiEnteName: [
                        { type: 'string', max: 50, message: '物流企业名称不能大于50位', trigger: 'blur' }
                    ],
                    note: [
                        { type: 'string', max: 200, message: '备注不能大于200位', trigger: 'blur' }
                    ],
                    ordersId: [
                        {required: true, message: '请输入订单编号', trigger: 'blur'}
                    ]
                },
                billManaColumns:[//运单新增
                    {
                        title: '序号',
                        type: 'index',
                        width: '6%'
                    },
                    {
                        title: '订单号',
                        key: 'orderId',
                        width: '18%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.orderId
                                }
                            }, [h('span', params.row.orderId)]);
                        }
                    },
                    {
                        title: '商品名',
                        key: 'gName',
                        width: '18%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gName
                                }
                            }, [h('span', params.row.gName)]);
                        }
                    },
                    {
                        title: '商品描述',
                        key: 'gDesc',
                        width: '18%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gDesc
                                }
                            }, [h('span', params.row.gDesc)]);
                        }
                    },
                    {
                        title: '规格型号',
                        key: 'gModel',
                        width: '12%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gModel
                                }
                            }, [h('span', params.row.gModel)]);
                        }
                    },
                    {
                        title: '数量',
                        key: 'gNum',
                        width: '8%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.gNum
                                }
                            }, [h('span', params.row.gNum)]);
                        }
                    },
                    {
                        title: '单价',
                        key: 'price',
                        width: '8%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.price
                                }
                            }, [h('span', params.row.price)]);
                        }
                    },
                    {
                        title: '币制',
                        key: 'currCode',
                        width: '8%',
                        render: (h, params) => {
                            return h('Tooltip', {
                                props: {
                                    content: params.row.currCode
                                }
                            }, [h('span', params.row.currCode)]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: '8%',
                        render: (h, params) => {
                            return h('div', [
                                h('span',
                                    {
                                        style:{
                                            cursor:'pointer',
                                            color:'#f76165'
                                        },
                                        on: {
                                            click: () => {
                                                this.removeBillMana(params.row)
                                            }
                                        }
                                    },'删除'
                                )
                            ]);
                        }
                    }
                ],
                billManaData:[]
            }
        },
        //所需子组件
        components: {
            Loading
        },
        created:function(){
            var width = window.innerWidth;
            if(width >1600){
                this.height=window.innerHeight-200;
            }else if(width > 1440 && width <=1600){
                this.height=window.innerHeight-180;
            }else if(width > 1366 && width <=1440){
                this.height=window.innerHeight-172;
            }else if(width > 1280 && width <=1366){
                this.height=window.innerHeight-166;
            }else if(width > 1024 && width <=1280){
                this.height=window.innerHeight-162;
            }else{
                this.height=window.innerHeight-151;
            }
            if(window.innerWidth > 1600){
                this.pageSize=20;
            }
            this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
            this.$http.get('/src/mock/logiEnteCodeList.json').then(data => {
                this.logiEnteCodeList=data.body.data;
            }, response => {
                // error callback
            });
            axios.get('/dict/4').then(res => {
                this.currCodeList=res.data;
            }).catch(err =>{
            });
        },
        mounted() {
            $(".billbody").scroll(function() {
                if(sessionStorage.getItem("billbodyScrollTop") == "YES"){
                    $('.billbody').animate({ scrollTop: 0 }, 1);
                    sessionStorage.setItem("billbodyScrollTop","NO");
                };
            }); $(".billbody").scroll(function() {
                if(sessionStorage.getItem("billbodyScrollTop") == "YES"){
                    $('.billbody').animate({ scrollTop: 0 }, 1);
                    sessionStorage.setItem("billbodyScrollTop","NO");
                };
            });
        },
        methods: {
            //查询物流数据，条件，当前页，每页显示多少条
            billManagementTableData (formData,currentPage,pageSize) {
                this.spinShow=true;
                this.tableShow = false;
                var waybillId = formData.waybillId;//订单号
                var fromDate = '';//开始时间
                var toDate = '';//结束时间
                if(formData.createtime.length != 0  && formData.createtime[0] != null && formData.createtime[1] != null && formData.createtime[0] != "" && formData.createtime[1] != ""){
                    var fromDateTime = (new Date(formData.createtime[0])).getTime();
                    fromDate = new Date(fromDateTime).format("yyyy-MM-dd");
                    var toDateTime = (new Date(formData.createtime[1])).getTime();
                    toDate = new Date(toDateTime).format("yyyy-MM-dd");
                }
                let data = {
                    params: {
                        pageIndex : currentPage,
                        pageSize : pageSize,
                        waybillId : waybillId,
                        fromDate : fromDate,
                        toDate : toDate
                    }
                };
                axios.get('/waybillheads',data).then(res => {
                    this.total=res.data.total;
                    this.pageTotal=Math.ceil(res.data.total / pageSize);
                    this.billManagementData = res.data.data;
                    this.spinShow=false;
                    this.tableShow = true;
                }).catch(err =>{
                })
            },
            //条件查询
            billManagementFormSearch () {
                this.currentPage = 1;
                this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
            },
            //清空搜索
            clearSearch(){
                this.billManagementForm = {//运单管理条件查询
                    waybillId: '',
                    billNo:'',
                    createtime: ''
                };
            },
            //改变页数
            changePage: function (page) {
                this.currentPage=page;
                this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
            },
            //改变每页显示多少条
            changeSize: function (pageSize) {
                this.currentPage=1;
                this.pageSize = pageSize;
                this.pageTotal=Math.ceil(this.total / this.pageSize);
                this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
            },
            //单选 全选
            selectChange(selection) {
                var waybillidList = "";
                for(var index in selection){
                    waybillidList += selection[index].waybillId + "-";
                }
                if(waybillidList.length > 0) {
                    waybillidList = waybillidList.substring(0, waybillidList.length-1);
                }
                this.waybillids = waybillidList;
            },
            //导出所有数据
            exportbillData(){
                if(this.waybillids == ""){
                    this.$Message.error('请至少选择一个!');
                }else{
                    axios.get('/waybillheads/'+ this.waybillids+'/xmls').then(res => {
                        this.$Message.success('批量生成报文成功');
                    }).catch(err =>{
                    })
                }
            },
            //生成报文
            exportInvoice (orderid) {
                axios.get('/waybillheads/'+orderid+'/xml').then(res => {
                    this.$Message.success('生成报文成功');
                }).catch(err =>{
                })
            },
            //根据ID删除运单列表
            remove(column){
                this.delModal=true;
                this.delId = column;
            },
            delOK(){
                this.delLoading = true;
                axios.delete('/waybillheads',{params: {waybillid:this.delId}}).then(res => {
                    this.$Message.success('删除成功');
                    this.delLoading = false;
                    this.delModal=false;
                    this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
                }).catch(err =>{
                    this.delLoading = false;
                });
            },
            delCancel() {
                this.delModal=false;
                this.delId = '';
            },
            //新增
            addBill (column) {
                this.disabled = false;
                this.addBillMana = true;//新增
                this.billModal = true;//弹窗
                $(".billbody").scroll();
                this.editBillMana = false;//编辑中
                var arr = this.logiEnteCodeList;
                for(var i in arr){
                    if(arr[i].logiEnteCode == this.billManaValidate.logiEnteCode)　{
                        this.billManaValidate.logiEnteCode = arr[i].logiEnteCode;
                        this.billManaValidate.logiEbCode = arr[i].logiEbCode;
                        this.billManaValidate.logiEnteName = arr[i].logiEnteName;
                        this.billManaValidate.iePort = arr[i].iePort;
                        this.billManaValidate.declPort = arr[i].declPort;
                    }
                };
                if (this.billManaValidate.consignerCoun !== '') {
                    this.loadingConsignerCoun = true;
                    axios.get('/dict/2/'+this.billManaValidate.consignerCoun).then(res => {
                        this.loadingConsignerCoun = false;
                        this.consignerCounList  = res.data;
                    }).catch(err =>{
                    })
                } else {
                    this.consignerCounList  = [];
                }
                var width = window.innerWidth;
                if(width >1600){
                    $("textarea.ivu-input").attr("style","height:32px");
                }else if(width > 1440 && width <=1600){
                    $("textarea.ivu-input").attr("style","height:28px");
                }else if(width > 1366 && width <=1440){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1280 && width <=1366){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else if(width > 1024 && width <=1280){
                    $("textarea.ivu-input").attr("style","height:26px");
                }else{
                    $("textarea.ivu-input").attr("style","height:26px");
                }
            },
            //保存新增运单
            saveBillMana (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.post('/waybillheads', this.billManaValidate).then(res => {
                            this.modal_loading = false;
                            //this.addBillMana = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('添加成功');
                            this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //打开编辑
            editBill (column) {
                this.disabled = true;
                this.addBillMana = false;//新增
                this.billModal = true;//弹窗
                this.editBillMana = true;//编辑
                axios.get('/waybillheads/'+column).then(res => {
                    this.billManaValidate=res.data;
                    this.billManaValidate.grossWeight=res.data.grossWeight.toString();
                    this.billManaValidate.packNum=res.data.packNum.toString();
                    this.billManaValidate.totalFreight=res.data.totalFreight.toString();
                    //自动补全收方国家
                    if (this.billManaValidate.consigneeCoun !== '') {
                        this.loadingConsigneeCoun = true;
                        axios.get('/dict/2/'+this.billManaValidate.consigneeCoun).then(res => {
                            this.loadingConsigneeCoun = false;
                            this.consigneeCounList  = res.data;
                        }).catch(err =>{
                        })
                    } else {
                        this.consigneeCounList  = [];
                    }
                    //自动补全买方国家
                    if (this.billManaValidate.consignerCoun !== '') {
                        this.loadingConsignerCoun = true;
                        axios.get('/dict/2/'+this.billManaValidate.consignerCoun).then(res => {
                            this.loadingConsignerCoun = false;
                            this.consignerCounList  = res.data;
                        }).catch(err =>{
                        })
                    } else {
                        this.consignerCounList  = [];
                    }
                }).catch(err =>{
                });
                axios.get('/waybillheads/'+column+'/goods').then(res => {
                    this.billManaData=res.data;
                }).catch(err =>{
                });
                /*setTimeout(() => {
                    $("#consignerCoun .ivu-select-input").click();
                    $("#consignerCoun .ivu-select-item").click();
                    if(this.billManaValidate.consigneeCoun != null){
                        $("#consigneeCoun .ivu-select-input").click();
                        $("#consigneeCoun .ivu-select-item").click();
                    }
                }, 1000);*/
            },
            //保存编辑运单
            editSaveBillMana (name) {
                this.modal_loading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        axios.put('/waybillheads', this.billManaValidate).then(res => {
                            this.modal_loading = false;
                            this.billModal = false;
                            this.editBillMana = false;
                            this.$refs[name].resetFields();
                            this.$Message.success('编辑成功');
                            this.billManagementData = this.billManagementTableData(this.billManagementForm,this.currentPage,this.pageSize);
                        }).catch(err =>{
                            this.modal_loading = false;
                        });
                    } else {
                        this.modal_loading = false;
                    }
                });
            },
            //删除商品信息
            removeBillMana (column) {
                this.delBillManaModal=true;
                this.delBillManaId = column.id;
                this.column = column._index;
            },
            delBillManaOK(){
                this.delLoading = true;
                axios.delete('/waybillheads/goods/'+this.delBillManaId).then(res => {
                    this.$Message.success('删除成功');
                    this.delLoading = false;
                    this.delBillManaModal=false;
                    this.billManaData.splice(this.column, 1);
                }).catch(err =>{
                    this.delLoading = false;
                });
            },
            delBillManaCancel() {
                this.delBillManaModal=false;
                this.delBillManaId = '';
            },
            //清空运单列表弹窗
            clearBillMana(name){
                this.$refs[name].resetFields();
            },
            //关闭运单列表弹窗
            closeBillMana(name){
                this.disabled = false;
                this.billModal = false;//弹窗
                this.addBillMana = false;//新增
                this.editBillMana = false;//编辑
                this.billManaData = [];
                this.$refs[name].resetFields();
                sessionStorage.setItem("billbodyScrollTop","YES");
            },
            selectLogiEnteCode(value){
                this.$http.get('/src/mock/logiEnteCodeList.json').then(data => {
                    var arr =data.body.data;
                    for(var i in arr){
                        if(arr[i].logiEnteCode == value)　{
                            this.billManaValidate.declPort = arr[i].declPort;
                            this.billManaValidate.iePort = arr[i].iePort;
                            this.billManaValidate.logiEnteCode = arr[i].logiEnteCode;
                            this.billManaValidate.logiEbCode = arr[i].logiEbCode;
                            this.billManaValidate.logiEnteName = arr[i].logiEnteName;
                        }
                    };
                    this.logiEnteCodeList = arr;
                }, response => {
                    // error callback
                });

            },
            //自动补全收方国家
            remoteConsigneeCoun(query){
                if (query !== '') {
                    this.loadingConsigneeCoun = true;
                    axios.get('/dict/2/'+query).then(res => {
                        this.loadingConsigneeCoun = false;
                        this.consigneeCounList  = res.data;
                    }).catch(err =>{
                    })
                } else {
                    this.consigneeCounList  = [];
                }
            },
            //自动补全买方国家
            remoteConsignerCoun(query){
                if (query !== '') {
                    this.loadingConsignerCoun = true;
                    axios.get('/dict/2/'+query).then(res => {
                        this.loadingConsignerCoun = false;
                        this.consignerCounList  = res.data;
                    }).catch(err =>{
                    })
                } else {
                    this.consignerCounList  = [];
                }
            },
            //根据运单号查询信息
            searchBillNo(billNo){
                axios.get('/waybillheads/'+billNo+'/auto').then(res => {
                    this.billManaValidate.consigneeName  = res.data.consigneeName;
                    this.billManaValidate.consigneeTel  = res.data.consigneeTel;
                    this.billManaValidate.consigneeAddr  = res.data.consigneeAddr;
                    this.billManaValidate.note  = res.data.note;
                    if(res.data.grossWeight != null){
                        this.billManaValidate.grossWeight  = res.data.grossWeight.toString();
                    }
                }).catch(err =>{
                })
            }
        }
    }
</script>